import heroStyles from './HomepageHero.module.css';
import logoStyles from './Logo.module.css';
import styles from './OgImage.module.css';

export function OgImage() {
  return (
    <div className={heroStyles.root}>
      <div className={heroStyles.tilesBg}></div>
      <div className={heroStyles.tiles}></div>
      <div className={heroStyles.content}>
        <div className={styles.logoContainer}>
          <svg
            viewBox="0 0 500 494"
            fill="url(#iconGradient)"
            xmlns="http://www.w3.org/2000/svg"
            className={logoStyles.logoSvg}
            style={{ width: 112 }}
          >
            <linearGradient
              id="iconGradient"
              x1="0%"
              y1="24%"
              x2="100%"
              y2="100%"
            >
              <stop className={styles.iconStop1} offset="0%" />
              <stop className={styles.iconStop2} offset="100%" />
            </linearGradient>
            <path d="M476.99 400.295C442.872 453.446 284.885 458.896 250.184 459.446H250H249.817C215.116 458.896 57.128 453.446 23.0104 400.295C18.8936 403.495 16.1769 407.762 16.1769 413.478V425.162C16.1769 469.397 136.647 493.247 250.017 493.247C363.387 493.247 483.84 469.38 483.84 425.162V413.478C483.84 407.762 481.124 403.512 477.007 400.295H476.99Z" />
            <path d="M43.2275 69.202C43.2275 63.6329 38.7166 59.1183 33.1522 59.1183C27.5878 59.1183 23.0769 63.6329 23.0769 69.202V239.657C23.0769 245.226 27.5878 249.74 33.1522 249.74C38.7166 249.74 43.2275 245.226 43.2275 239.657V69.202Z" />
            <path d="M469.04 217.773C460.239 95.5861 381.554 0 250 0C118.446 0 39.7607 95.5861 30.9604 217.773C30.9604 222.123 0.00953062 229.373 0.00953062 243.207V307.392C-0.507151 319.192 20.1268 315.876 27.1936 321.276C28.0437 321.926 28.4937 322.943 28.4937 324.009V362.91C28.4937 407.095 137.063 430.079 250 431.862C362.937 430.079 471.506 407.095 471.506 362.91V324.009C471.506 322.943 471.956 321.926 472.806 321.276C479.89 315.876 500.507 319.192 499.99 307.392V243.207C499.99 229.39 469.04 222.14 469.04 217.773ZM448.422 349.927C448.422 427.429 51.5777 427.429 51.5777 349.927V248.757C51.5777 143.254 137.097 140.637 242.6 140.637H257.417C362.92 140.637 448.439 143.254 448.439 248.757V349.927H448.422Z" />
            <path d="M219.899 166.421C242.033 165.371 264.184 164.855 286.451 165.188C308.668 165.855 331.102 167.388 353.286 172.888C364.353 175.655 375.403 179.438 385.737 185.339C390.937 188.205 395.737 191.889 400.204 195.939C402.337 198.072 404.471 200.222 406.371 202.572C408.204 204.989 410.104 207.339 411.621 209.939C414.855 215.039 417.238 220.54 419.288 226.09C420.171 228.907 420.955 231.74 421.688 234.557C422.255 237.407 422.905 240.257 423.238 243.124C424.805 254.574 424.471 266.008 422.621 277.108C422.555 277.475 422.205 277.725 421.838 277.658C421.555 277.608 421.338 277.375 421.288 277.108C419.338 266.091 417.288 255.341 414.104 245.157C410.938 234.99 406.571 225.473 400.571 217.356C394.721 209.123 387.304 202.306 378.803 196.539C370.37 190.639 360.57 186.405 350.369 183.122C329.869 176.688 307.968 173.788 286.068 171.822C264.134 169.705 242.016 168.821 219.899 167.738C219.532 167.721 219.249 167.405 219.266 167.038C219.266 166.688 219.566 166.421 219.899 166.405V166.421Z" />
          </svg>
        </div>
        <h1 className={heroStyles.headline}>
          A better way to <br className="sm:hidden" />
          build <br className="hidden sm:block" />
          React user <br className="sm:hidden" />
          interfaces.
        </h1>
        <div style={{ height: 5 }}></div>
      </div>
    </div>
  );
}
